React Native中的元件和佈局是開發應用程式的重要部分。今天就先來介紹其中一部分-元件。
元件（Components）
React Native中的元件是用來建構UI界面的基本單位。它們分為兩種類型：

• 內建元件（Built-in Components）： React Native提供了許多內建元件，例如‘Text’、‘View’、‘Image’、‘Button’等，這些元件用於構建基本的UI組件。
• 自訂元件（Custom Components）:開發者可以創建自己的自訂元件，這些元件可以根據應用程式的需求進行設計和定製，使程式碼更具可重用性。

HTML元素和Native元件的對照
在開發網頁時，通常會用到很多基本的HTML元素，這些元件包括<div>、<spa>以及<img>,以及用來組織的元素如<ol>、<ul>及<table>。

在使用React native 的時候，我們不在使用HTML元素，但改用類似的多樣元件取代

<Text>元件
Text元件用於顯示文字內容。render文字看似是最基本的功能，幾乎任何的應用程式都會需要再某處render文字。但是用React Native開發行動裝置以及網上用的render文字是不一樣的。

在React Native中，只有<Text>元件可以有純文字的子項，所以不可以這樣用：

Text doesn’t go here!
</View>

應該要用<Text>包裝過。

<Text>This is OK!</Text>
</View>

在React Native中使用<Text>元件時，你不需要再存取<strong>和<em>等類似的子標簽，而是既有設定fontWeight及fontStyle來套用樣式，以達成差不多的效果。

以下為一個小範例（建立可重用的文字樣式元件）

const styles = StyleSheet.create({
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
});

class Strong extends Component {
  render() {
    return (
      <Text style={styles.bold}>
        {this.props.children}
      </Text>
    );
  }
}

class Em extends Component {
  render() {
    return (
      <Text style={styles.italic}>
        {this.props.children}
      </Text>
    );
  }
}

<Image>元件
當為網頁撰寫HTML和CSS時，我們會用多種方法引用影像：有時用<img>標籤，有時使用CSS取得影像，例如使用background-image屬性。在React Native中，也有類似的<Image>元件，只是行為有稍微的差異。

<Image>元件基本的用法很直接：只要設定好source屬性就好

<Image source={require(“./puppies.png”)} />
      {/*Your content here...*/}
  </Image>
  

由於React Native著重在使用元件，所以影像也要被<Image>元件引用。舉例來說，在純HTML和CSS會使用background-image屬性來指定背景，而在React Native 就要改用<Image>元件當作容器，例如：

<Image source={require(“./poppies.png”)}>
      {/* Your content here…*/}
  </Image>

今天將介紹剩下一部分常見的元件，以及一部分的佈局。

<TextInput>元件
Text 是React Native中屬於處理文字輸入的基本UI元件。它允許用戶在應用程式中輸入文字，例如用戶名、密碼、搜索關鍵字等。

以下為為常見的語法
<onChangeText> 接受使用者每次輸入的字元
<onSubmitEditing>當virtual keyboard 的returnKey觸發時
<returnKeyType>設定returnKey在virtual keyboard上的長相
<value>TextInput當前在輸入框線上的字串
<blurOnSubmit>是否要讓元件在submit後失去焦點

<Button>元件
Button 元件是一個簡單的跨平台按鈕。這個組件的樣式是固定的，如果早在外觀上搭配應用程式的設計的話，可以使用TouchableOpacity或是TouchableNativeFeedback組件來設計自己的按鈕。

Import {Button} from ‘react-native’
<Button
    OnPress={onPressLearnMore}
    Title=“Learn More”
    Color=“#841584”
    AccessibilityLabel=“Learn moreabout this purple button”
  />

參考資料：React Native學習手冊——Bonnie Eisenman著\張靜雯 譯
React Native中文網——https://reactnative.cn/docs/button